<template>
  <div class="main-bg">
    <title-panel title="设置" :height="40" />
    <window-header :show-max="false" :show-min="false" :show-set-top="false" />

    <n-tabs
      type="bar"
      placement="left"
      style="height: calc(100vh - 40px);"
      pane-class="main-content"
    >
      <n-tab-pane name="accountAndFile">
        <template #tab>
          <svg-icon name="user" />账号与存储
        </template>
        <account-and-file />
      </n-tab-pane>

      <n-tab-pane name="normalConfig">
        <template #tab>
          <svg-icon name="setting" />通用
        </template>
        <normal-config />
      </n-tab-pane>

      <n-tab-pane name="fastKey">
        <template #tab>
          <svg-icon name="fast-keyboard" />快捷键
        </template>
        <fast-keyboard />
      </n-tab-pane>

      <n-tab-pane name="notice">
        <template #tab>
          <svg-icon name="ring" />通知
        </template>
        <notice-setting />
      </n-tab-pane>

      <n-tab-pane name="plugins">
        <template #tab>
          <svg-icon name="plugin" />插件
        </template>
        <plugins-list />
      </n-tab-pane>

      <n-tab-pane name="about">
        <template #tab>
          <svg-icon name="about" />关于微信
        </template>
        <about-app />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup>
import AccountAndFile from "./components/accountAndFile.vue";
import NormalConfig from "./components/normalConfig.vue";
import FastKeyboard from "@/views/setting/components/fastKeyboard.vue";
import NoticeSetting from './components/notice.vue'
import PluginsList from './components/plugins.vue'
import AboutApp from "./components/aboutApp.vue";

// 在mounted后再显示窗口并聚焦，可以减少白屏问题
import { onMounted } from "vue";
import { useCreateWindow } from "@/hooks/useCreateWindow.js";
const { setCurrentWindowShowAndFocus } = useCreateWindow();

onMounted(() => {
  setCurrentWindowShowAndFocus();
})
</script>

<style lang="scss" scoped>
:deep(.n-tabs-nav) {
  background-color: #f7f7f7;
  width: 160px;
}

.main-content {
  width: 325px;
  margin: 0 auto;
  height: calc(100vh - 40px);
  overflow-y: auto;
  padding-bottom: 40px !important;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */

  /* Webkit浏览器隐藏滚动条 */
  &::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }
}
.svg-icon {
  margin-right: 8px;
  font-size: 16px;
}
</style>
